<template>
    <view class="page-container">
        <!-- 表单区域 -->
        <view class="main-form">
            <u--form :model="formData" ref="uForm" :rules="rules" labelPosition="top" labelWidth="auto">
                <u-form-item label="户号" prop="buildingId">
                    <u-input v-model="formData.buildingId" placeholder="请输入户号" type="number"></u-input>
                </u-form-item>
            </u--form>

            <!-- 登录按钮 -->
            <view class="confirm-button">
                <u-button type="primary" :disabled="!isFormValid" @click="handleConfirmAction">确认绑定</u-button>
            </view>
        </view>
    </view>
</template>
<script>
export default {
    data() {
        return {
            formData: {
                buildingId: ''
            },
            rules: {
                buildingId: [{
                    required: true,
                    message: '请输入户号',
                    trigger: ['blur', 'change']
                }]
            }
        }
    },
    computed: {
        isFormValid() {
            const { buildingId } = this.formData
            return !!buildingId
        }
    },
    onReady() {
        this.$refs.uForm.setRules(this.rules)
    },
    methods: {
        handleConfirmAction() {
            this.$refs.uForm.validate().then(valid => {
                if (valid) {

                    uni.showModal({
                        title: '提示',
                        content: `确认绑定户号${this.formData.buildingId}吗`,
                        confirmText: '确认',
                        success: (res) => {
                            if (res.confirm) {
                                this.bindBuilding()
                            }
                        }
                    })

                }
            })
        },
        bindBuilding() {
            this.$utils.showLoading('提交中...')
            this.$services.homeService.bindBuildingForUser(this.formData.buildingId).then(() => {
                this.$utils.hideLoading()
                this.$utils.showMessage('绑定成功')
                setTimeout(() => {
                    uni.navigateBack()
                }, 1500)
            }).catch(err => {
                this.$utils.hideLoading()
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.page-container {
    min-height: 100vh;
    box-sizing: border-box;
    background-color: #fff;
    padding: 40rpx;

    .main-form {
        .confirm-button {
            margin-top: 60rpx;
        }
    }
}
</style>
